﻿@page "/progress-bar/angle"
@using Syncfusion.Blazor.ProgressBar
@using Syncfusion.Blazor
@inject NavigationManager Navigation
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a circular progress with customizing options for start and end angle.</p>
</SampleDescription>
<ActionDescription>
    <p>This demo for Blazor Progress Bar control shows the customizing options for angle in circular progress bar. Annotation is enabled in the sample to represent the progress value.</p>
</ActionDescription>

<div class="control-section progress-bar-parent">
    <div class="row" style="margin-top: 4%">
        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj1" Type="ProgressType.Circular" StartAngle="240" EndAngle="120" Width="160px" Height="160px"
                           Value="100" TrackThickness="5" ProgressThickness="5" CornerRadius="CornerType.Round" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
                <ProgressBarAnnotations>
                    <ProgressBarAnnotation>
                        <ContentTemplate>
                            @Annotation
                        </ContentTemplate>
                    </ProgressBarAnnotation>
                </ProgressBarAnnotations>
            </SfProgressBar>
        </div>
        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj2" Type="ProgressType.Circular" StartAngle="180" EndAngle="0" Width="160px" Height="160px"
                           Value="100" TrackThickness="5" ProgressThickness="5" CornerRadius="CornerType.Round" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
                <ProgressBarAnnotations>
                    <ProgressBarAnnotation>
                        <ContentTemplate>
                            @Annotation
                        </ContentTemplate>
                    </ProgressBarAnnotation>
                </ProgressBarAnnotations>
            </SfProgressBar>
        </div>
        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj3" Type="ProgressType.Circular" StartAngle="0" EndAngle="180" Width="160px" Height="160px"
                           Value="100" TrackThickness="5" ProgressThickness="5" CornerRadius="CornerType.Round" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
                <ProgressBarAnnotations>
                    <ProgressBarAnnotation>
                        <ContentTemplate>
                            @Annotation
                        </ContentTemplate>
                    </ProgressBarAnnotation>
                </ProgressBarAnnotations>
            </SfProgressBar>
        </div>
        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj4" Type="ProgressType.Circular" StartAngle="270" EndAngle="90" Width="160px" Height="160px"
                           Value="100" TrackThickness="5" ProgressThickness="5" CornerRadius="CornerType.Round" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
                <ProgressBarAnnotations>
                    <ProgressBarAnnotation>
                        <ContentTemplate>
                            @Annotation
                        </ContentTemplate>
                    </ProgressBarAnnotation>
                </ProgressBarAnnotations>
            </SfProgressBar>
        </div>
    </div>
    <div class="row" align="center">
        <button id="reLoad" class="e-control e-btn e-lib e-outline e-primary" @onclick="ProgressRefresh">Reload</button>
    </div>
</div>

@code{
    SfProgressBar ProObj1, ProObj2, ProObj3, ProObj4;
    RenderFragment Annotation { get; set; }

    public async Task ProgressRefresh()
    {
        await ProObj1.RefreshAsync();
        await ProObj2.RefreshAsync();
        await ProObj3.RefreshAsync();
        await ProObj4.RefreshAsync();
    }

    string CurrentUri;
    Theme CurrentTheme;
    protected override void OnInitialized()
    {
        CurrentUri = Navigation.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            CurrentTheme = Theme.Material;
            Annotation =@<div style='font-size:24px;font-weight:bold;color:#e91e63;fill:#0078D6'><span> 100 %</span></div>;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            CurrentTheme = Theme.Fabric;
            Annotation = @<div style='font-size:24px;font-weight:bold;color:#0078D6;fill:#0078D6'><span>100%</span></div>;
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            CurrentTheme = Theme.Bootstrap4;
            Annotation = @<div style='font-size:24px;font-weight:bold;color:#007bff;fill:#0078D6'><span>100%</span></div>;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            CurrentTheme = Theme.Bootstrap;
            Annotation = @<div style='font-size:24px;font-weight:bold;color:#317ab9;fill:#0078D6'><span>100%</span></div>;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            CurrentTheme = Theme.HighContrast;
            Annotation = @<div style='font-size:24px;font-weight:bold;color:#FFD939;fill:#0078D6'><span>100%</span></div>;
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            CurrentTheme = Theme.Tailwind;
            Annotation = @<div style='font-size:24px;font-weight:bold;color:#4F46E5;fill:#0078D6'><span>100%</span></div>;
        }
        else
        {
            CurrentTheme = Theme.Bootstrap4;
            Annotation = @<div style='font-size:24px;font-weight:bold;color:#007bff'><span>100%</span></div>;
        }
     }
}
<style>
    #control-container {
        padding: 0px !important;
    }

    #reLoad {
        border-radius: 4px;
        text-transform: capitalize;
        margin-top: 3%;
    }
</style>